﻿<html>
	<head>
		<title>Drag - jQuery LigerUI API</title>      
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
		<link href="../common.css" rel="stylesheet" type="text/css" />
		<script src="../core.js" type="text/javascript"></script> 
	</head>
	<body>
		<h2>ligerDrag</h2> 
         
        
                    <p> 
            拖动组件
        </p>
                     
          
                <h3>示例</h3>
        <pre><div><!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><span style="color: #008080;">  1</span> <span style="color: #000000;">  </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">script </span><span style="color: #FF0000;">type</span><span style="color: #0000FF;">=&quot;text/javascript&quot;</span><span style="color: #0000FF;">&gt;</span><span style="background-color: #F5F5F5; color: #000000;">
</span><span style="color: #008080;">  2</span> <span style="background-color: #F5F5F5; color: #000000;">
</span><span style="color: #008080;">  3</span> <span style="background-color: #F5F5F5; color: #000000;">        </span><span style="background-color: #F5F5F5; color: #0000FF;">function</span><span style="background-color: #F5F5F5; color: #000000;"> changeZIndex(obj)
</span><span style="color: #008080;">  4</span> <span style="background-color: #F5F5F5; color: #000000;">        {
</span><span style="color: #008080;">  5</span> <span style="background-color: #F5F5F5; color: #000000;">            $(obj).css(</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">z-index</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">, </span><span style="background-color: #F5F5F5; color: #000000;">2</span><span style="background-color: #F5F5F5; color: #000000;">).siblings(</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">div</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">).css(</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">z-index</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">, </span><span style="background-color: #F5F5F5; color: #000000;">1</span><span style="background-color: #F5F5F5; color: #000000;">);
</span><span style="color: #008080;">  6</span> <span style="background-color: #F5F5F5; color: #000000;">        }
</span><span style="color: #008080;">  7</span> <span style="background-color: #F5F5F5; color: #000000;">        $(</span><span style="background-color: #F5F5F5; color: #0000FF;">function</span><span style="background-color: #F5F5F5; color: #000000;"> ()
</span><span style="color: #008080;">  8</span> <span style="background-color: #F5F5F5; color: #000000;">        {
</span><span style="color: #008080;">  9</span> <span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #008000;">//</span><span style="background-color: #F5F5F5; color: #008000;">            $('#rr1,#rr3').ligerDrag({</span><span style="background-color: #F5F5F5; color: #008000;">
</span><span style="color: #008080;"> 10</span> <span style="background-color: #F5F5F5; color: #008000;"></span><span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #008000;">//</span><span style="background-color: #F5F5F5; color: #008000;">                onStartDrag: function (current)</span><span style="background-color: #F5F5F5; color: #008000;">
</span><span style="color: #008080;"> 11</span> <span style="background-color: #F5F5F5; color: #008000;"></span><span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #008000;">//</span><span style="background-color: #F5F5F5; color: #008000;">                {</span><span style="background-color: #F5F5F5; color: #008000;">
</span><span style="color: #008080;"> 12</span> <span style="background-color: #F5F5F5; color: #008000;"></span><span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #008000;">//</span><span style="background-color: #F5F5F5; color: #008000;">                    changeZIndex(current.target[0]);</span><span style="background-color: #F5F5F5; color: #008000;">
</span><span style="color: #008080;"> 13</span> <span style="background-color: #F5F5F5; color: #008000;"></span><span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #008000;">//</span><span style="background-color: #F5F5F5; color: #008000;">                }</span><span style="background-color: #F5F5F5; color: #008000;">
</span><span style="color: #008080;"> 14</span> <span style="background-color: #F5F5F5; color: #008000;"></span><span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #008000;">//</span><span style="background-color: #F5F5F5; color: #008000;">            }); </span><span style="background-color: #F5F5F5; color: #008000;">
</span><span style="color: #008080;"> 15</span> <span style="background-color: #F5F5F5; color: #008000;"></span><span style="background-color: #F5F5F5; color: #000000;">
</span><span style="color: #008080;"> 16</span> <span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #008000;">//</span><span style="background-color: #F5F5F5; color: #008000;">拖动时不使用代理</span><span style="background-color: #F5F5F5; color: #008000;">
</span><span style="color: #008080;"> 17</span> <span style="background-color: #F5F5F5; color: #008000;"></span><span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #0000FF;">var</span><span style="background-color: #F5F5F5; color: #000000;"> d </span><span style="background-color: #F5F5F5; color: #000000;">=</span><span style="background-color: #F5F5F5; color: #000000;"> $(</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">#rr1</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">).ligerDrag({ proxy: </span><span style="background-color: #F5F5F5; color: #0000FF;">false</span><span style="background-color: #F5F5F5; color: #000000;"> });
</span><span style="color: #008080;"> 18</span> <span style="background-color: #F5F5F5; color: #000000;">             
</span><span style="color: #008080;"> 19</span> <span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #008000;">//</span><span style="background-color: #F5F5F5; color: #008000;">使用头部,使用默认代理</span><span style="background-color: #F5F5F5; color: #008000;">
</span><span style="color: #008080;"> 20</span> <span style="background-color: #F5F5F5; color: #008000;"></span><span style="background-color: #F5F5F5; color: #000000;">            $(</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">#rr2</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">).ligerDrag({ handler: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">#rr2h</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;"> });
</span><span style="color: #008080;"> 21</span> <span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #008000;">//</span><span style="background-color: #F5F5F5; color: #008000;">使用自定义代理</span><span style="background-color: #F5F5F5; color: #008000;">
</span><span style="color: #008080;"> 22</span> <span style="background-color: #F5F5F5; color: #008000;"></span><span style="background-color: #F5F5F5; color: #000000;">            $(</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">#rr3</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">).ligerDrag({ proxy: </span><span style="background-color: #F5F5F5; color: #0000FF;">function</span><span style="background-color: #F5F5F5; color: #000000;"> ()
</span><span style="color: #008080;"> 23</span> <span style="background-color: #F5F5F5; color: #000000;">            {
</span><span style="color: #008080;"> 24</span> <span style="background-color: #F5F5F5; color: #000000;">                </span><span style="background-color: #F5F5F5; color: #0000FF;">var</span><span style="background-color: #F5F5F5; color: #000000;"> div </span><span style="background-color: #F5F5F5; color: #000000;">=</span><span style="background-color: #F5F5F5; color: #000000;"> $(</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">&lt;div class='proxy'&gt;proxy&lt;/div&gt;</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">);
</span><span style="color: #008080;"> 25</span> <span style="background-color: #F5F5F5; color: #000000;">                div.width($(</span><span style="background-color: #F5F5F5; color: #0000FF;">this</span><span style="background-color: #F5F5F5; color: #000000;">).width());
</span><span style="color: #008080;"> 26</span> <span style="background-color: #F5F5F5; color: #000000;">                div.height(</span><span style="background-color: #F5F5F5; color: #000000;">30</span><span style="background-color: #F5F5F5; color: #000000;">);
</span><span style="color: #008080;"> 27</span> <span style="background-color: #F5F5F5; color: #000000;">                div.appendTo(</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">body</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">);
</span><span style="color: #008080;"> 28</span> <span style="background-color: #F5F5F5; color: #000000;">                </span><span style="background-color: #F5F5F5; color: #0000FF;">return</span><span style="background-color: #F5F5F5; color: #000000;"> div;
</span><span style="color: #008080;"> 29</span> <span style="background-color: #F5F5F5; color: #000000;">            }
</span><span style="color: #008080;"> 30</span> <span style="background-color: #F5F5F5; color: #000000;">            });
</span><span style="color: #008080;"> 31</span> <span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #008000;">//</span><span style="background-color: #F5F5F5; color: #008000;">使用副本代理</span><span style="background-color: #F5F5F5; color: #008000;">
</span><span style="color: #008080;"> 32</span> <span style="background-color: #F5F5F5; color: #008000;"></span><span style="background-color: #F5F5F5; color: #000000;">            $(</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">#rr4</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">).ligerDrag({ proxy: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">clone</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;"> });
</span><span style="color: #008080;"> 33</span> <span style="background-color: #F5F5F5; color: #000000;">
</span><span style="color: #008080;"> 34</span> <span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #008000;">//</span><span style="background-color: #F5F5F5; color: #008000;">使用副本代理,并归位</span><span style="background-color: #F5F5F5; color: #008000;">
</span><span style="color: #008080;"> 35</span> <span style="background-color: #F5F5F5; color: #008000;"></span><span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #0000FF;">var</span><span style="background-color: #F5F5F5; color: #000000;"> drag5 </span><span style="background-color: #F5F5F5; color: #000000;">=</span><span style="background-color: #F5F5F5; color: #000000;"> $(</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">#rr5</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">).ligerDrag({ proxy: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">clone</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, revert: </span><span style="background-color: #F5F5F5; color: #0000FF;">true</span><span style="background-color: #F5F5F5; color: #000000;"> });
</span><span style="color: #008080;"> 36</span> <span style="background-color: #F5F5F5; color: #000000;">
</span><span style="color: #008080;"> 37</span> <span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #008000;">//</span><span style="background-color: #F5F5F5; color: #008000;">其实这里可以写成：</span><span style="background-color: #F5F5F5; color: #008000;">
</span><span style="color: #008080;"> 38</span> <span style="background-color: #F5F5F5; color: #008000;"></span><span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #008000;">//</span><span style="background-color: #F5F5F5; color: #008000;">var drag5 = new $.ligerui.controls.Drag({ proxy: 'clone', revert: true, target: $('#rr5')[0] });</span><span style="background-color: #F5F5F5; color: #008000;">
</span><span style="color: #008080;"> 39</span> <span style="background-color: #F5F5F5; color: #008000;"></span><span style="background-color: #F5F5F5; color: #000000;">
</span><span style="color: #008080;"> 40</span> <span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #008000;">//</span><span style="background-color: #F5F5F5; color: #008000;">绑定一个事件，改变拖动时的鼠标图标,也可以把onStartDrag作为参数传入,用bind的好处是可以多次绑定</span><span style="background-color: #F5F5F5; color: #008000;">
</span><span style="color: #008080;"> 41</span> <span style="background-color: #F5F5F5; color: #008000;"></span><span style="background-color: #F5F5F5; color: #000000;">            drag5.bind(</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">StartDrag</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, </span><span style="background-color: #F5F5F5; color: #0000FF;">function</span><span style="background-color: #F5F5F5; color: #000000;"> ()
</span><span style="color: #008080;"> 42</span> <span style="background-color: #F5F5F5; color: #000000;">            {
</span><span style="color: #008080;"> 43</span> <span style="background-color: #F5F5F5; color: #000000;">                </span><span style="background-color: #F5F5F5; color: #008000;">//</span><span style="background-color: #F5F5F5; color: #008000;">这里this就是drag5,组件管理器,类型为$.ligerui.controls.Drag</span><span style="background-color: #F5F5F5; color: #008000;">
</span><span style="color: #008080;"> 44</span> <span style="background-color: #F5F5F5; color: #008000;"></span><span style="background-color: #F5F5F5; color: #000000;">
</span><span style="color: #008080;"> 45</span> <span style="background-color: #F5F5F5; color: #000000;">                </span><span style="background-color: #F5F5F5; color: #008000;">//</span><span style="background-color: #F5F5F5; color: #008000;">drag5.cursor = 'not-allowed';</span><span style="background-color: #F5F5F5; color: #008000;">
</span><span style="color: #008080;"> 46</span> <span style="background-color: #F5F5F5; color: #008000;"></span><span style="background-color: #F5F5F5; color: #000000;">                </span><span style="background-color: #F5F5F5; color: #0000FF;">this</span><span style="background-color: #F5F5F5; color: #000000;">.cursor </span><span style="background-color: #F5F5F5; color: #000000;">=</span><span style="background-color: #F5F5F5; color: #000000;"> </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">not-allowed</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">;
</span><span style="color: #008080;"> 47</span> <span style="background-color: #F5F5F5; color: #000000;">            });
</span><span style="color: #008080;"> 48</span> <span style="background-color: #F5F5F5; color: #000000;">
</span><span style="color: #008080;"> 49</span> <span style="background-color: #F5F5F5; color: #000000;">
</span><span style="color: #008080;"> 50</span> <span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #008000;">//</span><span style="background-color: #F5F5F5; color: #008000;">这里利用receive属性定义了一个接收区域</span><span style="background-color: #F5F5F5; color: #008000;">
</span><span style="color: #008080;"> 51</span> <span style="background-color: #F5F5F5; color: #008000;"></span><span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #0000FF;">var</span><span style="background-color: #F5F5F5; color: #000000;"> drag6 </span><span style="background-color: #F5F5F5; color: #000000;">=</span><span style="background-color: #F5F5F5; color: #000000;"> $(</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">#rr6</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">).ligerDrag({ proxy: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">clone</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, revert: </span><span style="background-color: #F5F5F5; color: #0000FF;">true</span><span style="background-color: #F5F5F5; color: #000000;">
</span><span style="color: #008080;"> 52</span> <span style="background-color: #F5F5F5; color: #000000;">            , receive: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">#receive</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">
</span><span style="color: #008080;"> 53</span> <span style="background-color: #F5F5F5; color: #000000;">            });
</span><span style="color: #008080;"> 54</span> <span style="background-color: #F5F5F5; color: #000000;">            drag6.bind(</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">StartDrag</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, </span><span style="background-color: #F5F5F5; color: #0000FF;">function</span><span style="background-color: #F5F5F5; color: #000000;"> ()
</span><span style="color: #008080;"> 55</span> <span style="background-color: #F5F5F5; color: #000000;">            {
</span><span style="color: #008080;"> 56</span> <span style="background-color: #F5F5F5; color: #000000;">                </span><span style="background-color: #F5F5F5; color: #0000FF;">this</span><span style="background-color: #F5F5F5; color: #000000;">.cursor </span><span style="background-color: #F5F5F5; color: #000000;">=</span><span style="background-color: #F5F5F5; color: #000000;"> </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">not-allowed</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">;
</span><span style="color: #008080;"> 57</span> <span style="background-color: #F5F5F5; color: #000000;">            });
</span><span style="color: #008080;"> 58</span> <span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #008000;">//</span><span style="background-color: #F5F5F5; color: #008000;">当进入区域时</span><span style="background-color: #F5F5F5; color: #008000;">
</span><span style="color: #008080;"> 59</span> <span style="background-color: #F5F5F5; color: #008000;"></span><span style="background-color: #F5F5F5; color: #000000;">            drag6.bind(</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">DragEnter</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, </span><span style="background-color: #F5F5F5; color: #0000FF;">function</span><span style="background-color: #F5F5F5; color: #000000;"> (receive, source, e)
</span><span style="color: #008080;"> 60</span> <span style="background-color: #F5F5F5; color: #000000;">            {
</span><span style="color: #008080;"> 61</span> <span style="background-color: #F5F5F5; color: #000000;">                drag6.cursor </span><span style="background-color: #F5F5F5; color: #000000;">=</span><span style="background-color: #F5F5F5; color: #000000;"> </span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">pointer</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">;
</span><span style="color: #008080;"> 62</span> <span style="background-color: #F5F5F5; color: #000000;">                $(receive).find(</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">.message</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">).html(</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">进入区域</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">);
</span><span style="color: #008080;"> 63</span> <span style="background-color: #F5F5F5; color: #000000;">            });
</span><span style="color: #008080;"> 64</span> <span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #008000;">//</span><span style="background-color: #F5F5F5; color: #008000;">在区域移动</span><span style="background-color: #F5F5F5; color: #008000;">
</span><span style="color: #008080;"> 65</span> <span style="background-color: #F5F5F5; color: #008000;"></span><span style="background-color: #F5F5F5; color: #000000;">            drag6.bind(</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">DragOver</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, </span><span style="background-color: #F5F5F5; color: #0000FF;">function</span><span style="background-color: #F5F5F5; color: #000000;"> (receive, source, e)
</span><span style="color: #008080;"> 66</span> <span style="background-color: #F5F5F5; color: #000000;">            {
</span><span style="color: #008080;"> 67</span> <span style="background-color: #F5F5F5; color: #000000;">                $(receive).find(</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">.message</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">).html(</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">在区域移动 </span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;"> </span><span style="background-color: #F5F5F5; color: #000000;">+</span><span style="background-color: #F5F5F5; color: #000000;"> e.pageX </span><span style="background-color: #F5F5F5; color: #000000;">+</span><span style="background-color: #F5F5F5; color: #000000;"> </span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">:</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;"> </span><span style="background-color: #F5F5F5; color: #000000;">+</span><span style="background-color: #F5F5F5; color: #000000;"> e.pageY);
</span><span style="color: #008080;"> 68</span> <span style="background-color: #F5F5F5; color: #000000;">            });
</span><span style="color: #008080;"> 69</span> <span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #008000;">//</span><span style="background-color: #F5F5F5; color: #008000;">离开区域</span><span style="background-color: #F5F5F5; color: #008000;">
</span><span style="color: #008080;"> 70</span> <span style="background-color: #F5F5F5; color: #008000;"></span><span style="background-color: #F5F5F5; color: #000000;">            drag6.bind(</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">DragLeave</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, </span><span style="background-color: #F5F5F5; color: #0000FF;">function</span><span style="background-color: #F5F5F5; color: #000000;"> (receive, source, e)
</span><span style="color: #008080;"> 71</span> <span style="background-color: #F5F5F5; color: #000000;">            {
</span><span style="color: #008080;"> 72</span> <span style="background-color: #F5F5F5; color: #000000;">                </span><span style="background-color: #F5F5F5; color: #0000FF;">this</span><span style="background-color: #F5F5F5; color: #000000;">.cursor </span><span style="background-color: #F5F5F5; color: #000000;">=</span><span style="background-color: #F5F5F5; color: #000000;"> </span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">not-allowed</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">;
</span><span style="color: #008080;"> 73</span> <span style="background-color: #F5F5F5; color: #000000;">                $(receive).find(</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">.message</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">).html(</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">离开区域</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">);
</span><span style="color: #008080;"> 74</span> <span style="background-color: #F5F5F5; color: #000000;">            });
</span><span style="color: #008080;"> 75</span> <span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #008000;">//</span><span style="background-color: #F5F5F5; color: #008000;">在区域释放</span><span style="background-color: #F5F5F5; color: #008000;">
</span><span style="color: #008080;"> 76</span> <span style="background-color: #F5F5F5; color: #008000;"></span><span style="background-color: #F5F5F5; color: #000000;">            drag6.bind(</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">Drop</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, </span><span style="background-color: #F5F5F5; color: #0000FF;">function</span><span style="background-color: #F5F5F5; color: #000000;"> (receive, source, e)
</span><span style="color: #008080;"> 77</span> <span style="background-color: #F5F5F5; color: #000000;">            {
</span><span style="color: #008080;"> 78</span> <span style="background-color: #F5F5F5; color: #000000;">                source.hide();
</span><span style="color: #008080;"> 79</span> <span style="background-color: #F5F5F5; color: #000000;">                $(receive).find(</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">.txt</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">).val(source.find(</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">.txt</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">).val());
</span><span style="color: #008080;"> 80</span> <span style="background-color: #F5F5F5; color: #000000;">                $(receive).find(</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">.message</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">).html(</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">在区域释放</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">);
</span><span style="color: #008080;"> 81</span> <span style="background-color: #F5F5F5; color: #000000;">            });
</span><span style="color: #008080;"> 82</span> <span style="background-color: #F5F5F5; color: #000000;">
</span><span style="color: #008080;"> 83</span> <span style="background-color: #F5F5F5; color: #000000;">        });
</span><span style="color: #008080;"> 84</span> <span style="background-color: #F5F5F5; color: #000000;">         
</span><span style="color: #008080;"> 85</span> <span style="background-color: #F5F5F5; color: #000000;">    </span><span style="color: #0000FF;">&lt;/</span><span style="color: #800000;">script</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;"> 86</span> <span style="color: #000000;">    </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">style </span><span style="color: #FF0000;">type</span><span style="color: #0000FF;">=&quot;text/css&quot;</span><span style="color: #0000FF;">&gt;</span><span style="background-color: #F5F5F5; color: #800000;">
</span><span style="color: #008080;"> 87</span> <span style="background-color: #F5F5F5; color: #800000;">        .proxy
</span><span style="color: #008080;"> 88</span> <span style="background-color: #F5F5F5; color: #800000;">        </span><span style="background-color: #F5F5F5; color: #000000;">{</span><span style="background-color: #F5F5F5; color: #FF0000;">
</span><span style="color: #008080;"> 89</span> <span style="background-color: #F5F5F5; color: #FF0000;">            border</span><span style="background-color: #F5F5F5; color: #000000;">:</span><span style="background-color: #F5F5F5; color: #0000FF;"> 1px splid #333</span><span style="background-color: #F5F5F5; color: #000000;">;</span><span style="background-color: #F5F5F5; color: #FF0000;">
</span><span style="color: #008080;"> 90</span> <span style="background-color: #F5F5F5; color: #FF0000;">            position</span><span style="background-color: #F5F5F5; color: #000000;">:</span><span style="background-color: #F5F5F5; color: #0000FF;"> absolute</span><span style="background-color: #F5F5F5; color: #000000;">;</span><span style="background-color: #F5F5F5; color: #FF0000;">
</span><span style="color: #008080;"> 91</span> <span style="background-color: #F5F5F5; color: #FF0000;">            z-index</span><span style="background-color: #F5F5F5; color: #000000;">:</span><span style="background-color: #F5F5F5; color: #0000FF;"> 4</span><span style="background-color: #F5F5F5; color: #000000;">;</span><span style="background-color: #F5F5F5; color: #FF0000;">
</span><span style="color: #008080;"> 92</span> <span style="background-color: #F5F5F5; color: #FF0000;">            background</span><span style="background-color: #F5F5F5; color: #000000;">:</span><span style="background-color: #F5F5F5; color: #0000FF;"> #f1f1f1</span><span style="background-color: #F5F5F5; color: #000000;">;</span><span style="background-color: #F5F5F5; color: #FF0000;">
</span><span style="color: #008080;"> 93</span> <span style="background-color: #F5F5F5; color: #FF0000;">        </span><span style="background-color: #F5F5F5; color: #000000;">}</span><span style="background-color: #F5F5F5; color: #800000;">
</span><span style="color: #008080;"> 94</span> <span style="background-color: #F5F5F5; color: #800000;">        .box
</span><span style="color: #008080;"> 95</span> <span style="background-color: #F5F5F5; color: #800000;">        </span><span style="background-color: #F5F5F5; color: #000000;">{</span><span style="background-color: #F5F5F5; color: #FF0000;">
</span><span style="color: #008080;"> 96</span> <span style="background-color: #F5F5F5; color: #FF0000;">            width</span><span style="background-color: #F5F5F5; color: #000000;">:</span><span style="background-color: #F5F5F5; color: #0000FF;"> 80px</span><span style="background-color: #F5F5F5; color: #000000;">;</span><span style="background-color: #F5F5F5; color: #FF0000;">
</span><span style="color: #008080;"> 97</span> <span style="background-color: #F5F5F5; color: #FF0000;">            height</span><span style="background-color: #F5F5F5; color: #000000;">:</span><span style="background-color: #F5F5F5; color: #0000FF;"> 80px</span><span style="background-color: #F5F5F5; color: #000000;">;</span><span style="background-color: #F5F5F5; color: #FF0000;">
</span><span style="color: #008080;"> 98</span> <span style="background-color: #F5F5F5; color: #FF0000;">            border</span><span style="background-color: #F5F5F5; color: #000000;">:</span><span style="background-color: #F5F5F5; color: #0000FF;"> 1px solid #ddd</span><span style="background-color: #F5F5F5; color: #000000;">;</span><span style="background-color: #F5F5F5; color: #FF0000;">
</span><span style="color: #008080;"> 99</span> <span style="background-color: #F5F5F5; color: #FF0000;">        </span><span style="background-color: #F5F5F5; color: #000000;">}</span><span style="background-color: #F5F5F5; color: #800000;">
</span><span style="color: #008080;">100</span> <span style="background-color: #F5F5F5; color: #800000;">        .txt
</span><span style="color: #008080;">101</span> <span style="background-color: #F5F5F5; color: #800000;">        </span><span style="background-color: #F5F5F5; color: #000000;">{</span><span style="background-color: #F5F5F5; color: #FF0000;">
</span><span style="color: #008080;">102</span> <span style="background-color: #F5F5F5; color: #FF0000;">            margin</span><span style="background-color: #F5F5F5; color: #000000;">:</span><span style="background-color: #F5F5F5; color: #0000FF;"> 2px</span><span style="background-color: #F5F5F5; color: #000000;">;</span><span style="background-color: #F5F5F5; color: #FF0000;">
</span><span style="color: #008080;">103</span> <span style="background-color: #F5F5F5; color: #FF0000;">            width</span><span style="background-color: #F5F5F5; color: #000000;">:</span><span style="background-color: #F5F5F5; color: #0000FF;"> 60px</span><span style="background-color: #F5F5F5; color: #000000;">;</span><span style="background-color: #F5F5F5; color: #FF0000;">
</span><span style="color: #008080;">104</span> <span style="background-color: #F5F5F5; color: #FF0000;">            border</span><span style="background-color: #F5F5F5; color: #000000;">:</span><span style="background-color: #F5F5F5; color: #0000FF;"> 1px solid #333</span><span style="background-color: #F5F5F5; color: #000000;">;</span><span style="background-color: #F5F5F5; color: #FF0000;">
</span><span style="color: #008080;">105</span> <span style="background-color: #F5F5F5; color: #FF0000;">        </span><span style="background-color: #F5F5F5; color: #000000;">}</span><span style="background-color: #F5F5F5; color: #800000;">
</span><span style="color: #008080;">106</span> <span style="background-color: #F5F5F5; color: #800000;">    </span><span style="color: #0000FF;">&lt;/</span><span style="color: #800000;">style</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">107</span> <span style="color: #000000;"></span><span style="color: #0000FF;">&lt;/</span><span style="color: #800000;">head</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">108</span> <span style="color: #000000;"></span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">body </span><span style="color: #FF0000;">style</span><span style="color: #0000FF;">=&quot;padding: 10px&quot;</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">109</span> <span style="color: #000000;">    </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">div </span><span style="color: #FF0000;">id</span><span style="color: #0000FF;">=&quot;rr1&quot;</span><span style="color: #FF0000;"> class</span><span style="color: #0000FF;">=&quot;box&quot;</span><span style="color: #FF0000;"> style</span><span style="color: #0000FF;">=&quot;top: 100px; background: #A6DBD8; position: absolute;&quot;</span><span style="color: #0000FF;">&gt;&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">110</span> <span style="color: #000000;">    </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">div </span><span style="color: #FF0000;">id</span><span style="color: #0000FF;">=&quot;rr2&quot;</span><span style="color: #FF0000;"> class</span><span style="color: #0000FF;">=&quot;box&quot;</span><span style="color: #FF0000;"> style</span><span style="color: #0000FF;">=&quot;top: 100px; left: 100px; background: #AFCCF1; position: absolute;&quot;</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">111</span> <span style="color: #000000;">        </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">div </span><span style="color: #FF0000;">id</span><span style="color: #0000FF;">=&quot;rr2h&quot;</span><span style="color: #FF0000;"> style</span><span style="color: #0000FF;">=&quot;width: 100%; height: 30px; background: #95BBEC; line-height: 30px;&quot;</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">112</span> <span style="color: #000000;">        </span><span style="color: #0000FF;">&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">113</span> <span style="color: #000000;">    </span><span style="color: #0000FF;">&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">114</span> <span style="color: #000000;">    </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">div </span><span style="color: #FF0000;">id</span><span style="color: #0000FF;">=&quot;rr3&quot;</span><span style="color: #FF0000;"> class</span><span style="color: #0000FF;">=&quot;box&quot;</span><span style="color: #FF0000;"> style</span><span style="color: #0000FF;">=&quot;top: 100px; left: 200px; background: #DA9188; position: absolute;&quot;</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">115</span> <span style="color: #000000;">    </span><span style="color: #0000FF;">&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">116</span> <span style="color: #000000;">    </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">div </span><span style="color: #FF0000;">id</span><span style="color: #0000FF;">=&quot;rr4&quot;</span><span style="color: #FF0000;"> class</span><span style="color: #0000FF;">=&quot;box&quot;</span><span style="color: #FF0000;"> style</span><span style="color: #0000FF;">=&quot;top: 100px; left: 300px; background: #9CD88A; position: absolute;&quot;</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">117</span> <span style="color: #000000;">    </span><span style="color: #0000FF;">&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">118</span> <span style="color: #000000;">    </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">div </span><span style="color: #FF0000;">id</span><span style="color: #0000FF;">=&quot;rr5&quot;</span><span style="color: #FF0000;"> class</span><span style="color: #0000FF;">=&quot;box&quot;</span><span style="color: #FF0000;"> style</span><span style="color: #0000FF;">=&quot;top: 100px; left: 400px; background: #D09CC5; position: absolute;&quot;</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">119</span> <span style="color: #000000;">    </span><span style="color: #0000FF;">&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">120</span> <span style="color: #000000;">    </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">div </span><span style="color: #FF0000;">id</span><span style="color: #0000FF;">=&quot;rr6&quot;</span><span style="color: #FF0000;"> class</span><span style="color: #0000FF;">=&quot;box&quot;</span><span style="color: #FF0000;"> style</span><span style="color: #0000FF;">=&quot;top: 100px; left: 500px; background: #E2DC6B; position: absolute;&quot;</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">121</span> <span style="color: #000000;">        </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">input </span><span style="color: #FF0000;">type</span><span style="color: #0000FF;">=&quot;text&quot;</span><span style="color: #FF0000;"> class</span><span style="color: #0000FF;">=&quot;txt&quot;</span><span style="color: #FF0000;"> value</span><span style="color: #0000FF;">=&quot;内容&quot;</span><span style="color: #FF0000;"> </span><span style="color: #0000FF;">/&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">122</span> <span style="color: #000000;">    </span><span style="color: #0000FF;">&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">123</span> <span style="color: #000000;">    </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">div </span><span style="color: #FF0000;">id</span><span style="color: #0000FF;">=&quot;receive&quot;</span><span style="color: #FF0000;"> style</span><span style="color: #0000FF;">=&quot;top: 300px; left: 100px; position: absolute; width: 200px;
</span><span style="color: #008080;">124</span> <span style="color: #0000FF;">        height: 200px; padding: 10px; border: 1px solid #888;&quot;</span><span style="color: #FF0000;"> onSelectStart</span><span style="color: #0000FF;">= &quot;return false&quot;</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">125</span> <span style="color: #000000;">        </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">p</span><span style="color: #0000FF;">&gt;&lt;</span><span style="color: #800000;">input </span><span style="color: #FF0000;">type</span><span style="color: #0000FF;">=&quot;text&quot;</span><span style="color: #FF0000;"> class</span><span style="color: #0000FF;">=&quot;txt&quot;</span><span style="color: #FF0000;"> value</span><span style="color: #0000FF;">=&quot;&quot;</span><span style="color: #FF0000;"> </span><span style="color: #0000FF;">/&gt;&lt;/</span><span style="color: #800000;">p</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">126</span> <span style="color: #000000;">        </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">p</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">第6个例子 可以拖动到这里，试试</span><span style="color: #0000FF;">&lt;/</span><span style="color: #800000;">p</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">127</span> <span style="color: #000000;">        </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">p </span><span style="color: #FF0000;">class</span><span style="color: #0000FF;">=&quot;message&quot;</span><span style="color: #0000FF;">&gt;&lt;/</span><span style="color: #800000;">p</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">128</span> <span style="color: #000000;">    </span><span style="color: #0000FF;">&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">129</span> <span style="color: #000000;">    </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">div </span><span style="color: #FF0000;">id</span><span style="color: #0000FF;">=&quot;message&quot;</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">130</span> <span style="color: #000000;">    </span><span style="color: #0000FF;">&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">131</span> <span style="color: #000000;">    </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">div </span><span style="color: #FF0000;">style</span><span style="color: #0000FF;">=&quot;display: none&quot;</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">132</span> <span style="color: #000000;">    </span><span style="color: #0000FF;">&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">133</span> <span style="color: #000000;"></span><span style="color: #0000FF;">&lt;/</span><span style="color: #800000;">body</span><span style="color: #0000FF;">&gt;</span></div></pre>
        
        <h3>截图</h3>

        <p>
            <img src="../../uishow/ligerDrag.jpg" />
        </p>  
        

			</body>
</html>